<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      .main {
        width: 100%;
        height: 150px;
        background-color: aqua;
        /* 只需要用border-radius 就可以实现椭圆形 */
        /* border-radius这是一个复合属性，有四个值， 左上角  右上角  右下角 左下角 */
        /* border-radius: 50% */
        /* border-radius: 10px 20px 30px 40px; */
        /* 每个角的值如果只写一个值 表示是半径，是圆形 */
        /* 每个角的值是 a/b 表示是椭圆形的 长半径/短半径  是椭圆形 */
        border-radius: 0 0 180px 180px/20px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <input type="text" />
    </div>
  </body>
</html>
